feat: add footer & home UI #24
Conversation
src/modules/homepage/Icons.tsx
Outdated
There was a problem hiding this comment.
can we move this to svg/Icons? I think it is better to have unified system for saving the icons!
There was a problem hiding this comment.
I was having issue having it all together. I think it is some kind of compile issue. Once I put too many icons in one file, it stops rendering nav and footer and svg icons gets render different icons
There was a problem hiding this comment.
okay! maybe it's better then making all components having Icons they are using inside the folders. Let's add TODO about cleaning up the svg icon files for later!
| cards: [ | ||
| { | ||
| icon: 'graduationCap', | ||
| title: 'Read FAQs', | ||
| description: 'Get more information on basic terms and how the Uniswap app works', | ||
| color: 'pink', | ||
| }, | ||
| { | ||
| icon: 'lightbulb', | ||
| title: 'How to use Uniswap', | ||
| description: 'Get more information on basic terms and how the Uniswap web app works', | ||
| color: 'green', | ||
| }, | ||
| { | ||
| icon: 'helpCircle', | ||
| title: 'Troubleshoot an issue', | ||
| description: 'Explore our guides for help troubleshooting issues', | ||
| color: 'blue', | ||
| }, | ||
| { | ||
| icon: 'messageQuestion', | ||
| title: 'Submit a Request', | ||
| description: 'If you’re having trouble you can contact our helpful team', | ||
| color: 'orange', | ||
| } |
There was a problem hiding this comment.
can we also add 'link' field to this object? need to check with Sam, but i think these cards block items will be linked to article pages except for the 'submit a request' card which will be linked to 'https://support.uniswap.org/hc/en-us/requests/new'. Let's skip adding hover state for each items now and address it during the QA!!
There was a problem hiding this comment.
I will handle this in following PR!
| <a | ||
| href={url} | ||
| className="col-span-4 group relative transition rounded-medium py-padding-small px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 hover:bg-light-accent-2 hover:dark:bg-dark-accent-2" | ||
| target="_self" | ||
| > | ||
| <div className="absolute top-0 right-0 transition z-10 py-padding-small px-padding-medium opacity-0 group-hover:opacity-100"> | ||
| <ArrowRight className="my-1 w-5 h-5" /> | ||
| </div> | ||
| <h4 className="transition subheading-2 text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-pink-vibrant dark:group-hover:text-dark-pink-vibrant"> | ||
| {title} | ||
| </h4> |
There was a problem hiding this comment.
can we add some padding or separate the grid between description text and the icon so that they are not overlapped like the design?
Current:
Design:
| <h2 className="flex flex-col items-center text-light-neutral-1 dark:text-dark-neutral-1"> | ||
| <span className="heading-0-mobile sm:heading-0">{homepageData.hero.headerLine1}</span> | ||
| <span className="serif-heading-0-mobile sm:serif-heading-0 italic"> | ||
| {homepageData.hero.headerLine2} | ||
| </span> | ||
| </h2> |
There was a problem hiding this comment.
sorry for requesting this now, Sohee. In the yesterday's meeting, they said they want to switch the copy of homepage hero randomly between two options. could you change this so that there will be two hero copies and rendered one of them chosen randomly? Updates on design is linked here: https://www.figma.com/design/OjF353pKdQ7XtoU3LIQOxY/%5BShared%5D-Uniswap%2FXXIX-Design-Review?node-id=1454-5367&m=dev
|
@limsohee1002 requested few more things after checking the preview!! |
|
@nahbee10 I will handle those in following PR! I am working off of this right now to make sure everything renders correctly. I don't want to create too much conflict 🙏 |
Description
add footer
add homepage
Type(s) of changes
Motivation for PR
#10 #8
How Has This Been Tested?
Applicable screenshots
https://www.loom.com/share/7f2b07b5caaf47598bc61b688403f40c?sid=0b2b7cd6-8f1d-4712-aec8-54b48f7081fa
Follow-up PR